<template>
  <div class="app-container" style="padding: 8px 8px;">
    <el-popover placement="left" width="500" trigger="click" style="position: fixed; right: 0;">
      <el-tree :data="allNodes" :default-checked-keys="checkedKeys" node-key="id"
               show-checkbox highlight-current draggable ref="tree" :allow-drop="allowDrop"
               @node-drop="nodeDrop" @check="onCheck" class="home-page-tree">
        <span style="width: 428px; line-height: 28px;" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span style="float: right;">
            <el-input-number v-model="num[data.id]" :precision="1" :step="0.1" :max="100" :min="20"></el-input-number>
          </span>
        </span>
      </el-tree>
      <el-radio-group v-model="solution" @change="setSolution" class="home-page-radio">
        <el-radio v-for="(solution, index) in solutions" :key="index" :label="index">{{solution[0].NAME}}</el-radio>
      </el-radio-group>
      <el-button type="primary" style="float: right;" @click="save">{{$t('button.save')}}</el-button>
      <el-tooltip slot="reference" :content="_$Z['personalizedSettings']" placement="left">
        <el-button type="text"><i class="el-icon-setting" style="font-size: 20px; color: #1ab394;"></i></el-button>
      </el-tooltip>
    </el-popover>
    <div v-for="(item, index) in items" :key="index" class="home-page-chart" :style="{width: item.width}">
      <el-card shadow="never">
        <component :is="components[item.key]" :height="item.height" :checked-keys="checkedKeys"></component>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss">
  .home-page-chart {
    padding: 0 6px;
    margin: 6px 0;
    display: inline-block;
  }

  .home-page-tree {
    .el-tree-node {
      height: 32px;
    }
  }

  .home-page-radio {
    .el-radio-group {
      height: 28px;
      .el-radio {
        line-height: 28px;
      }
    }
  }
</style>

<script>
import { query, post } from '@/api/common'
export default {
  data() {
    return {
      i18Keys: ['personalizedSettings'],
      items: [],
      sets: [],
      solutions: [],
      // 个性化设置
      allNodes: [],
      checkedKeys: [],
      num: {},
      solution: null,
      components: {}
    }
  },
  methods: {
    // 加载主页
    loadHomePage() {
      query('/view/homePage/homePageGetPersonalise', null).then(response => {
        const data = response.data.data
        if (data === null || data.length === 0) {
          return
        }
        this.sets = data.sets
        this.solutions = data.solutions
        this.setComponent()
      })
    },

    // 配置组件
    setComponent() {
      const allNodes = []
      const checkedKeys = []
      this.sets.forEach(e => {
        allNodes.push({
          id: e.ID,
          label: e.TEXT
        })
        if (e.IS_SHOW !== 'N') {
          checkedKeys.push(e.ID)
        }
        if (e.URL) {
          const key = e.KEY
          var component = () => import('@/' + e.URL + '.vue')
          this.components[key] = component
        }
      })

      this.allNodes = allNodes
      this.checkedKeys = checkedKeys
    },

    // 配置方案
    setSolution() {
      const sets = []
      this.solutions[this.solution].forEach(e => {
        sets.push({
          ID: e.COMP_ID,
          IS_SHOW: e.IS_SHOW,
          KEY: e.KEY,
          TEXT: e.TEXT,
          URL: e.URL,
          WIDTH: e.WIDTH
        })
      })
      this.sets = sets
      this.setComponent()
    },

    // 拖动节点不改变选中
    nodeDrop(draggingNode, dropNode, dropType, e) {
      this.$refs.tree.setCheckedKeys(this.checkedKeys)
    },

    // 不允许子节点操作
    allowDrop(draggingNode, dropNode, type) {
      if (type === 'inner') {
        return false
      }
      return true
    },

    // 选中节点时
    onCheck(node, data) {
      this.checkedKeys = data.checkedKeys
    },

    // 保存
    save() {
      const nodes = this.$refs.tree.data
      const checkedNodes = this.$refs.tree.getCheckedKeys()
      const items = []
      nodes.forEach((x, index) => {
        const item = {
          sort: index + 1,
          id: x.id,
          width: this.num[x.id]
        }
        let flag = false
        checkedNodes.forEach(y => {
          if (y === x.id) {
            item.show = 'Y'
            flag = true
          }
        })
        if (!flag) {
          item.show = 'N'
        }
        items.push(item)
      })
      post('/view/homePage/homePageSetPersonalise', { json: JSON.stringify(items) }).then(response => {
        this.$message({
          type: 'success',
          message: this.$t('message.saveSuccess')
        })
        this.loadHomePage()
      })
    }
  },
  created() {
    this.loadHomePage()
  },

  watch: {
    checkedKeys: function(val) {
      this.items = []
      this.num = []
      const items = []
      val.forEach(x => {
        this.sets.forEach(y => {
          if (x === y.ID) {
            const width = y.WIDTH === null ? y.DWIDTH : y.WIDTH
            const height = width > 50 ? 480 : 283
            const param = {
              id: y.ID,
              key: y.KEY,
              width: width + '%',
              height: height + 'px'
            }
            if (width === 50) {
              param.width = 'calc(100%/2)'
            } else if (width === 33) {
              param.width = 'calc(100%/3)'
            } else if (width === 25) {
              param.width = 'calc(100%/4)'
            }
            items.push(param)
            this.num[y.ID] = width
          }
        })
      })
      setTimeout(() => {
        this.items = items
      }, 0)
    }
  }
}
</script>
